package myJs.components

import japgolly.scalajs.react.ReactMonocle._
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import monocle.Lens
import monocle.macros.Lenses
import myJs.components.inline.{InputInlineComponent, SelectInlineComponent}
import myJs.myPkg.jquery._
import myJs.tool.Tool._
import myJs.Implicits._

import scala.collection.immutable.SeqMap

/** Created by yz on 3/11/2020
  */
object FontArgComponent {

  @Lenses
  case class State(
      formJq: JQuery = $("#form"),
      claalpha: String,
      claalphaShow: Boolean,
      clapew: String,
      clapewShow: Boolean,
      clascw: String,
      clascwShow: Boolean,
      clapcw: String,
      clapcwShow: Boolean,
      mainTitle: String,
      mainTitleFont: String,
      showColName: String,
      xTitleFont: String,
      xFont: String,
      xRotate: String,
      showRowName: String,
      yTitleFont: String,
      yFont: String,
      yRotate: String,
      legendTitle: String,
      legendTitleFont: String,
      legendFont: String,
      sampleFont: String,
      envFont: String,
      speciesFont: String,
      mainTitleShow: Boolean,
      mainTitleFontShow: Boolean,
      showRowNameShow: Boolean,
      showColNameShow: Boolean,
      xTitleFontShow: Boolean,
      xFontShow: Boolean,
      xRotateShow: Boolean,
      yTitleFontShow: Boolean,
      yFontShow: Boolean,
      yRotateShow: Boolean,
      legendTitleShow: Boolean,
      legendTitleFontShow: Boolean,
      legendFontShow: Boolean,
      sampleFontShow: Boolean,
      envFontShow: Boolean,
      speciesFontShow: Boolean,
      clalfs: String,
      clalfsShow: Boolean,
      claclfs: String,
      claclfsShow: Boolean,
      feacfs: String,
      feacfsShow: Boolean
  )

  object State {

    def init = {
      State(
        claalpha = "0.2",
        claalphaShow = false,
        clapew = "0.25",
        clapewShow = false,
        clascw = "2",
        clascwShow = false,
        clapcw = "0.75",
        clapcwShow = false,
        mainTitle = "",
        mainTitleFont = "15",
        showColName = "T",
        xTitleFont = "12",
        xFont = "10",
        xRotate = "0",
        showRowName = "T",
        yTitleFont = "11",
        yFont = "6",
        yRotate = "-90",
        legendTitle = "finalDecision",
        legendTitleFont = "11",
        legendFont = "9",
        sampleFont = "7",
        envFont = "7",
        speciesFont = "7",
        mainTitleShow = false,
        mainTitleFontShow = false,
        showRowNameShow = false,
        showColNameShow = false,
        xTitleFontShow = false,
        xFontShow = false,
        xRotateShow = false,
        yRotateShow = false,
        yTitleFontShow = false,
        yFontShow = false,
        legendTitleShow = false,
        legendTitleFontShow = false,
        legendFontShow = false,
        sampleFontShow = false,
        envFontShow = false,
        speciesFontShow = false,
        clalfs = "6",
        clalfsShow = false,
        claclfs = "8",
        claclfsShow = false,
        feacfs = "13",
        feacfsShow = false
      )
    }

  }

  class Backend(bs: BackendScope[Unit, State]) {

    def render(s: State) = {

      implicit class MyLens[T](lens: Lens[State, T]) {

        def zoomL(implicit r: Reusability[T]) = {
          StateSnapshot.withReuse.zoomL(lens).prepareVia(bs).apply(s)
        }

      }

      val showRowNameMap = SeqMap("F" -> messages("no"), "T" -> messages("yes"))
      val yFontShow = if (s.showRowNameShow) {
        s.showRowName == "T"
      } else s.yFontShow
      val yRotateShow = if (s.showRowNameShow) {
        s.showRowName == "T"
      } else s.yRotateShow
      val xFontShow = if (s.showColNameShow) {
        s.showColName == "T"
      } else s.xFontShow
      val xRotateShow = if (s.showColNameShow) {
        s.showColName == "T"
      } else s.xRotateShow
      val yRotateMap = SeqMap("90" -> "-90", "45" -> "-45", "0" -> "0", "-45" -> "45", "-90" -> "90")
      div(
        InputInlineComponent
          .Props(
            State.claalpha.zoomL,
            label = messages("claalpha"),
            name = "claalpha",
            show = s.claalphaShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.clapew.zoomL,
            label = messages("clapew"),
            name = "clapew",
            show = s.clapewShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.clascw.zoomL,
            label = messages("clascw"),
            name = "clascw",
            show = s.clascwShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.clapcw.zoomL,
            label = messages("clapcw"),
            name = "clapcw",
            show = s.clapcwShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.mainTitle.zoomL,
            label = messages("mainTitleContent"),
            name = "mainTitle",
            show = s.mainTitleShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.mainTitleFont.zoomL,
            label = messages("mainTitleSize"),
            name = "mainTitleFont",
            show = s.mainTitleFontShow,
            formJq = s.formJq
          )
          .render,
        SelectInlineComponent
          .Props(
            State.showColName.zoomL,
            label = messages("showColnames"),
            name = "showColName",
            optionMap = showRowNameMap,
            show = s.showColNameShow
          )
          .render,
        InputInlineComponent
          .Props(
            State.xTitleFont.zoomL,
            label = messages("xaxisTitleSize"),
            name = "xTitleFont",
            show = s.xTitleFontShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.xFont.zoomL,
            label = messages("xaxisTextSize"),
            name = "xFont",
            show = xFontShow,
            formJq = s.formJq
          )
          .render,
        SelectInlineComponent
          .Props(
            State.xRotate.zoomL,
            label = messages("colnamesAngle"),
            name = "xRotate",
            optionMap = yRotateMap,
            show = xRotateShow
          )
          .render,
        SelectInlineComponent
          .Props(
            State.showRowName.zoomL,
            label = messages("showRownames"),
            name = "showRowName",
            optionMap = showRowNameMap,
            show = s.showRowNameShow
          )
          .render,
        InputInlineComponent
          .Props(
            State.yTitleFont.zoomL,
            label = messages("yAxisTitleSize"),
            name = "yTitleFont",
            show = s.yTitleFontShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.feacfs.zoomL,
            label = messages("feacfs"),
            name = "feacfs",
            show = s.feacfsShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.yFont.zoomL,
            label = messages("yAxisTextSize"),
            name = "yFont",
            show = yFontShow,
            formJq = s.formJq
          )
          .render,
        SelectInlineComponent
          .Props(
            State.yRotate.zoomL,
            label = messages("rownamesAngle"),
            name = "yRotate",
            optionMap = yRotateMap,
            show = yRotateShow
          )
          .render,
        InputInlineComponent
          .Props(
            State.legendTitle.zoomL,
            label = messages("legendTitleContent"),
            name = "legendTitle",
            show = s.legendTitleShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.legendTitleFont.zoomL,
            label = messages("legendTitleSize"),
            name = "legendTitleFont",
            show = s.legendTitleFontShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.legendFont.zoomL,
            label = messages("legendTextSize"),
            name = "legendFont",
            show = s.legendFontShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.sampleFont.zoomL,
            label = messages("sampleNameFontSize"),
            name = "sampleFont",
            show = s.sampleFontShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.envFont.zoomL,
            label = messages("environmentalFactorsFontSize"),
            name = "envFont",
            show = s.envFontShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.speciesFont.zoomL,
            label = messages("speciesFontSize"),
            name = "speciesFont",
            show = s.speciesFontShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.clalfs.zoomL,
            label = messages("clalfs"),
            name = "clalfs",
            show = s.clalfsShow,
            formJq = s.formJq
          )
          .render,
        InputInlineComponent
          .Props(
            State.claclfs.zoomL,
            label = messages("claclfs"),
            name = "claclfs",
            show = s.claclfsShow,
            formJq = s.formJq
          )
          .render
      )

    }

  }

  def component(state: State) = {
    ScalaComponent.builder[Unit].initialState(state).renderBackend[Backend].build
  }

  val Component = component(State.init)

}
